<template>
	<view class="list">
		<view
			class="fixbg"
			v-if="playList.coverImgUrl"
			:style="{ backgroundImage: 'url(' + playList.coverImgUrl + ')' }"
		></view>
		<muscihead title="歌单" :showIcon="true" color="white"></muscihead>
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y>
				<!-- 头部区域 -->
				<view class="list-head">
					<view class="list-head-img">
						<image v-if="playList.coverImgUrl" :src="playList.coverImgUrl"></image>
						<text class="iconfont icon-yousanjiao">{{ playList.playCount | formatCount }}</text>
					</view>
					<view class="list-head-text">
						<view>{{ playList.name }}</view>
						<view v-if="playList.creator">
							<image :src="playList.creator.avatarUrl"></image>
							{{ playList.creator.nickname }}
						</view>
						<view>{{ playList.description }}</view>
					</view>
				</view>
				<!-- 分享区域 -->
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="list-share">
					<text class="iconfont icon-fenxiang"></text>
					分享给微信好友
				</button>
				<!-- #endif -->
				<!-- 音乐列表区域 -->
				<view class="list-music">
					<view class="list-music-head">
						<text class="iconfont icon-bofang_o"></text>
						<text>播放全部</text>
						<text>({{ playList.trackCount }})</text>
					</view>
					<view
						class="list-music-item"
						v-for="(item, index) in playList.tracks"
						:key="index"
						@tap="handleToDetail(item.id)"
					>
						<view class="list-music-top">{{ index + 1 }}</view>
						<view class="list-music-song">
							<view>{{ item.name }}</view>
							<view>
								<image v-if="showSingle(index)" src="../../static/dujia.png"></image>
								<image v-if="showSq(index)" src="../../static/sq.png"></image>
								{{ item.ar[0].name }} - {{ item.name }}
							</view>
						</view>
						<text class="iconfont icon-bofang"></text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import muscihead from '../../components/muscihead/muscihead.vue'

import { list } from '../../common/api.js'
export default {
	data() {
		return {
			playList: {},
			privileges: {},
			isLoading: true
		}
	},
	components: {
		muscihead
	},
	async onLoad(options) {
		uni.showLoading({
			title: '正在加载中......'
		})

		const res = await list(options.listId)
		if (res[1].data.code === 200) {
			this.playList = res[1].data.playlist
			this.privileges = res[1].data.privileges
			this.isLoading = false
			uni.hideLoading()
			// console.log(res[1].data.playlist.trackIds)
			this.$store.commit('INIT_TOPLISTIDS', res[1].data.playlist.trackIds)
		}
		// console.log(this.playList)
	},
	methods: {
		showSingle(index) {
			const { privileges } = this
			return privileges[index].flag > 60 && privileges[index].flag < 70
		},
		showSq(index) {
			const { privileges } = this
			return privileges[index].maxbr === 999000
		},
		handleToDetail(songId) {
			// console.log(songId)
			uni.navigateTo({
				url: '../detail/detail?songId=' + songId
			})
		}
	}
}
</script>

<style scoped lang="less">
.list-head {
	display: flex;
	margin: 30rpx;
	.list-head-img {
		overflow: hidden;
		position: relative;
		width: 264rpx;
		height: 264rpx;
		border-radius: 30rpx;
		margin-right: 42rpx;
		image {
			width: 100%;
			height: 100%;
		}
		text {
			position: absolute;
			top: 8rpx;
			right: 8rpx;
			color: #fff;
			font-size: 26rpx;
		}
	}
	.list-head-text {
		color: #f0f2f7;
		flex: 1;
		view:nth-child(1) {
			color: #fff;
			font-size: 34rpx;
		}
		view:nth-child(2) {
			display: flex;
			margin: 20rpx 0;
			font-size: 24rpx;
			align-items: center;
			image {
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				margin-right: 14rpx;
			}
		}
		view:nth-child(3) {
			font-size: 22rpx;
			line-height: 34rpx;
		}
	}
}
.list-share {
	width: 330rpx;
	height: 74rpx;
	text-align: center;
	line-height: 74rpx;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 37rpx;
	color: #fff;
	font-size: 28rpx;
	text {
		margin-right: 16rpx;
	}
}
.list-music {
	background-color: #fff;
	border-radius: 50rpx;
	margin-top: 40rpx;
	overflow: hidden;
	.list-music-head {
		height: 50rpx;
		margin: 30rpx 0 0 22rpx;
		left: 50rpx;
		margin-bottom: 70rpx;
		text:nth-child(1) {
			height: 50rpx;
			font-size: 50rpx;
		}
		text:nth-child(2) {
			font-size: 30rpx;
			margin: 0 10rpx 0 26rpx;
		}
		text:nth-child(3) {
			font-size: 26rpx;
			color: #b2b2b2;
		}
	}
	.list-music-item {
		display: flex;
		margin: 0 32rpx 66rpx 46rpx;
		align-items: center;
		color: #959595;
		.list-music-top {
			width: 58rpx;
			font-size: 30rpx;
			line-height: 30rpx;
		}
		.list-music-song {
			flex: 1;
			view:nth-child(1) {
				font-size: 28rpx;
				color: #000;
				width: 70vw;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			view:nth-child(2) {
				font-size: 20rpx;
				width: 70vw;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				image {
					width: 30rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}
			}
		}
		text {
			font-size: 50rpx;
			color: #c7c7c7;
		}
	}
}
</style>
